<template>
    <div class="comp-files-viewer">
        <!-- {{files}} -->
        <div class="files" v-if="files.length > 0">
            <div class="file" v-for="(file, index) in files" :key="file.id">
                <div class="index" v-if="files.length > 1">
                    <span>{{ index + 1 }}</span>
                    <span style="padding-right: 4px">.</span>
                </div>
                <a class="name" :href="file.value" @click.prevent.stop="open(file)">{{ file.name }}</a>
            </div>
        </div>
        <el-image-viewer ref="picturesViewer" :urlList="pictures" :zIndex="3000" :onClose="() => open()" v-if="pictures.length > 0"></el-image-viewer>
        <comp-dialog title="视频播放" width="640px" height="420px" ref="videoPlayer" @close="open()">
            <video :src="video.value" style="display: block; width: 100%; height: 100%; background-color: black; object-fit: contain" controls controlslist="nodownload noremoteplayback" preload="metadata" v-if="video"></video>
        </comp-dialog>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string } from "../util";
    import ElImageViewer from "element-ui/packages/image/src/image-viewer";
    export default {
        name: "comp-files-viewer",
        mixins: [mixin],
        components: { ElImageViewer },
        props: {
            files: { type: Array, default: () => [] },
        },
        data: () => ({
            pictures: [],
            video: null,
        }),
        methods: {
            open(file) {
                let files = this.files.slice();
                let type = file ? file.type : "";
                let index = files.indexOf(file);
                if (index > -1) files.splice(index, 1);
                if (type === "image") {
                    this.pictures = files.filter((file) => file.type === type).map((file) => file.value);
                    this.pictures.unshift(file.value);
                    this.video = null;
                    this.$refs.videoPlayer.close();
                } else if (type === "document") {
                    window.open(file.value);
                    this.pictures = [];
                    this.video = null;
                    this.$refs.videoPlayer.close();
                } else if (type === "video") {
                    this.pictures = [];
                    this.video = file;
                    this.$refs.videoPlayer.init();
                } else {
                    this.pictures = [];
                    this.video = null;
                    this.$refs.videoPlayer.close();
                }
            },
        },
    };
</script>

<style lang="scss">
    .comp-files-viewer {
        overflow: hidden;

        & > .files {
            display: flex;
            flex-direction: column;

            & > .file {
                flex: 0 0 auto;
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                margin-bottom: 4px;

                & > .index {
                    flex: 0 0 auto;
                    height: 18px;
                    color: #1677ff;
                    font-size: 14px;
                    line-height: 18px;
                }

                & > .name {
                    flex: 0 1 auto;
                    min-height: 18px;
                    color: #1677ff;
                    font-size: 14px;
                    line-height: 18px;
                    text-decoration: none;
                    cursor: pointer;

                    &:hover {
                        text-decoration: underline;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
</style>